<template>
  <div class="creator-layout">
    <div class="layout-inner">
      <!-- 左侧导航栏 -->
      <div class="sidebar">
        <div class="nav-section">
          <router-link
            v-for="item in navItems"
            :key="item.path"
            :to="item.path"
            class="nav-btn"
            :class="{ active: route.path.startsWith(item.path) }"
          >
            <i>{{ item.icon }}</i>
            <span>{{ item.label }}</span>
          </router-link>
        </div>
      </div>

      <!-- 中间内容区域 -->
      <div class="main-content">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router'

const route = useRoute()

const navItems = [
  { path: '/creator/image-text-editor', label: '发布动态', icon: '📷' },
  { path: '/creator/article-editor', label: '发布文章', icon: '✍️' },
  { path: '/creator/content-management', label: '内容管理', icon: '📝' },
  { path: '/home/dynamic', label: '首页', icon: '🏠' },
]
</script>

<style scoped>
/* 外层居中背景 */
.creator-layout {
  display: flex;
  justify-content: center;
  background-color: #f9f9f9;
  min-height: 100vh;
}

/* 最大宽度限制 & 内边距 */
.layout-inner {
  display: flex;
  max-width: 1280px;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

/* 左侧侧边栏样式（添加边框与首页一致） */
.sidebar {
  width: 240px;
  padding-right: 20px;
  border-right: 1px solid #eee; /* 添加与首页一致的边框 */
  box-sizing: border-box;
}

.nav-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nav-btn {
  display: flex;
  align-items: center;
  padding: 10px;
  font-size: 16px;
  border-radius: 6px;
  color: #333;
  text-decoration: none;
  background-color: #fff;
  transition: background-color 0.3s;
}

.nav-btn:hover {
  background-color: #ddd;
}

.nav-btn i {
  margin-right: 8px;
  font-size: 18px;
}

/* 中间内容区域 */
.main-content {
  flex: 1;
  padding: 0 20px;
  box-sizing: border-box;
  max-width: 800px;
}

.nav-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nav-btn {
  display: flex;
  align-items: center;
  padding: 12px;
  font-size: 16px;
  border-radius: 6px;
  color: #333;
  text-decoration: none;
  background-color: #fff;
  transition: background 0.3s, color 0.3s;
}

.nav-btn:hover {
  background-color: #eee;
}

.nav-btn i {
  margin-right: 8px;
  font-size: 18px;
}

.nav-btn.active {
  background-color: #007bff;
  color: white;
  font-weight: bold;
}
</style>
